<template>
  <div class="productionGeneral">

    <!-- 左侧 -->
    <div class="left_box">
		<!-- 左上 -->
    	<div class="left_top chart_box">
			<TopLeftChart :chartHeight="chartHeight" :config_online="config_online"/>
		</div>
		<!-- 左中 -->
		<div class="left_middle">
			<MiddleRightChart  :chartHeight="chartHeight"  :chartWidth="chartWidth"/>
		</div>
		<!-- 左下 -->
		<div class="left_bottom chart_box">
			<BottomRightChart  :chartHeight="chartHeight" :chartWidth="chartWidth"  :config_recovery="recovery"/>
		</div>
    </div>

		<!-- 中间 -->
		<div class="middle_box">
			<CenterChart :coladata="config_cola"/>
		</div>

		<!-- 右侧 -->
		<div class="right_box">
			<!-- 右上 -->
			<div class="right_top chart_box">
				<TopRightChart  :chartHeightSize="chartHeightSize"  :config_one="config_one" :config_two="config_two"/>
			</div>
			<!-- 右中 -->
			<!-- <div class="right_middle chart_box">
				<MiddleRightChart  :chartHeight="chartHeight" :config_energy="config_energy"/>
			</div> -->
			<!-- 右下 -->
			<div class="right_bottom chart_box" :style="{ top:chartHeightSize }">
				<BottomLeftChart :chartHeightSize="chartHeightSize" />
			</div>
		</div>
	</div>
</template>

<script>
import minix from "../../mixins/production";
import TopLeftChart from "../components/productionGeneral/leftTop";
import MiddleLeftChart from "../components/productionGeneral/leftMiddle.vue";
import BottomLeftChart from "../components/productionGeneral/leftBottom.vue";
import TopRightChart from "../components/productionGeneral/rightTop.vue";
import MiddleRightChart from "../components/productionGeneral/rightMiddle.vue";
import BottomRightChart from "../components/productionGeneral/rightBottom/index.vue";
import CenterChart from "../components/productionGeneral/center.vue";
export default {
  components: {
    TopLeftChart,
    MiddleLeftChart,
    TopRightChart,
    BottomLeftChart,
    MiddleRightChart,
    BottomRightChart,
    CenterChart,
  },
  mixins: [minix],
  data() {
    return {
      config_one: {}, //仓位信息
      config_two: {}, //仓位信息
      config_pdc: {
		  allsum:0,
		  daysum:0,
		  classsum:0
	  }, //皮带秤
	  recovery:{HSL1:[],HSL2:[]},//回收率
	  coladata:{},
    config_online:{}
    };
  },
  sockets: {
    connect: function(data) {
      console.log("连接connect", data);
      this.createSocket();
    },
    reconnect(data) {
      console.log("重新连接", data);
      this.$socket.connect();
    },
    disconnect() {
      console.log("socket已断开连接");
    },
    overview(data) {
      var temp = JSON.parse(data).overview;
	    //仓位
      this.config_one = {
        data: temp.position_one,
        showValue: true,
      };
      this.config_two = {
        data: temp.position_two,
        showValue: true,
      };
      //皮带秤
      this.config_pdc = {
        allsum: temp.allsum,
        daysum: temp.daysum,
        classsum: temp.classsum,
      };
	  //回收率
	  this.recovery.Time = temp.recovery.map(item=>{
		  return item.SJ
	  })
	  this.recovery.HSL1 = temp.recovery.map(item=>{
		  return item.HSL1
	  })
	  this.recovery.HSL2 = temp.recovery.map(item=>{
		  return item.HSL2
	  })
	  //中间球球
	  this.config_cola = temp.coladata
      console.log(temp, "message");

	  //生产运行状况
	  this.config_online = temp.OnlineDevice
	  
    },
  },
beforeDestroy() {
    this.$socket.close();
},
mounted() {
    this.createSocket();
},
  methods: {
    //创建socket链接
    createSocket() {
      this.$socket.connect();
      this.$socket.emit("overview", { subscribe: true });
    },
  },
};
</script>

<style lang="scss">
.productionGeneral {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
}
.left_box,.right_box {
  width: 22%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position:relative;
}
.middle_box {
  width: 56%;
  height: 100%;
}
.chart_box {
  width: 100%;
}
.right_bottom{
	position:absolute;
	left:-1rem;
	margin-top:0.8rem;
}

.dv-scroll-board .header {
  font-size: 12px !important;
  color: #01d6ff !important;
}
.dv-scroll-board .rows .ceil {
  font-size: 10px !important;
}
</style>
